<template>
  <div style="background: #f0f2f5;margin-left: -10px;margin-right: -10px">
    <!-- 顶栏说明 -->
    <div class="clearfix p-20" style="background:#f8f8f8">
      <div class="float-left">
        <h3 class="float-left mr-50">需求名称:{{ demand.demandName }}</h3>
        <p class="float-left">
          需求链接:
          <a :href="demand.demandLink" target="_blank">链接</a>
        </p>
      </div>
      <div class="float-right">
        <a-button type="primary" class="mr-10">编辑需求</a-button>
        <a-button type="primary" @click="openAddModal">新建接口</a-button>
        <add-interface
          ref="addInterfaceForm"
          :visible="visible"
          :confirmLoading="confirmLoading"
          @cancel="handleCancel"
          @create="handleOk"
        ></add-interface>
      </div>
    </div>
    <!-- 内容 -->
    <div class="mt-10">
      <a-row>
        <a-col :span="6">
          <div class="p-10">
            <!-- 侧边栏 -->
            <div class="p-10" style="background: #fff;">
              <!--切换展示方式-->
              <div>
                <a-radio-group
                  v-model="tabType"
                  buttonStyle="solid"
                  class="w-100"
                >
                  <a-radio-button value="interface" class="text-center w-50"
                    >按接口</a-radio-button
                  >
                  <a-radio-button value="group" class="text-center w-50"
                    >按分组</a-radio-button
                  >
                </a-radio-group>
              </div>
              <!--按接口-->
              <div v-if="tabType === 'interface'">
                <ul>
                  <li
                    v-for="item of tableData"
                    :key="item.id"
                    @click="searchDetail(item.id)"
                  >
                    {{ item.interfaceName }}
                  </li>
                </ul>
              </div>
              <!--按分组-->
              <div v-if="tabType === 'group'">
                按分组展示接口列表
              </div>
            </div>
          </div>
        </a-col>
        <a-col :span="18">
          <div class="p-10">
            <!-- 接口详情 -->
            <div class="p-10" style="background: #fff;">
              <a-tabs defaultActiveKey="1" @change="changeTab">
                <a-tab-pane tab="详情" key="1">
                  <interface-detail :detail="detail"></interface-detail>
                </a-tab-pane>
                <a-tab-pane tab="编辑" key="2" forceRender>
                  <interface-edit :detail="detail"></interface-edit>
                </a-tab-pane>
                <a-tab-pane tab="历史变更" key="3">
                  Content of Tab Pane 3
                </a-tab-pane>
              </a-tabs>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script lang="ts" src="./demand-interface-detail.ts"></script>

<style lang="scss">
@import './demand-interface-detail.scss';
</style>
